<template>
	<div class="">
		<header id="header">
			<a class="logo" href="https://www.starbucks.com.cn/design-studio/">
				<img class="nonie-black" src="./img/logo.svg" alt="">
				<img class="ie-white" src="./img/logo-white.svg" alt="">
			</a>

    		<div class="controls">
				<button class="icon trigger wechat-share mobile-hidden">
					<img class="nonie-black" id="ds-wechat-black" src="./img/icon-wechat.svg" alt="微信" title="微信">
					<img class="ie-white" id="ds-wechat-white" src="./img/icon-wechat-white.svg" alt="微信" title="微信">
					<span>微信</span>
				</button>
				<div class="wechat-qr">
					<p>使用微信扫码分享</p>
					<div class="triangle-up"></div>
				</div>
				<button class="icon trigger mobile-visible" rel="wechat-overlay">
					<img class="nonie-black" src="./img/icon-wechat.svg" alt="微信" title="微信">
					<img class="ie-white" src="./img/icon-wechat-white.svg" alt="微信" title="微信">
					<span>微信</span>
				</button>
				<div class="overlay" id="wechat-overlay">
					<div class="body">
					<button class="icon close" rel="wechat-overlay">
						<img class="nonie-black" src="./img/icon-close.svg" alt="Close" title="Close">
						<img class="ie-white" src="./img/icon-close-white.svg" alt="Close" title="Close">
						<span>Close</span>
					</button>
					<div class="wechat-dialog">
						<p>请长按下方链接进行复制分享给好友</p>
						<span class="wechat-dialog-url">https://www.starbucks.com.cn/design-studio/</span>
					</div>
					</div>
				</div>

				<button class="icon search trigger" rel="search-overlay">
					<img class="nonie-black" id="ds-search-box-black" src="./img/icon-search.svg" alt="查找门店" title="查找门店">
					<img class="ie-white" id="ds-search-box-white" src="./img/icon-search-white.svg" alt="查找门店" title="查找门店">
					<span>查找门店</span>
				</button>
				<div class="overlay" id="search-overlay">
					<header class="header">
						<button class="icon close" rel="search-overlay">
							<img class="nonie-black" id="ds-search-close-black" src="./img/icon-close.svg" alt="Close" title="Close">
							<img class="ie-white" id="ds-search-close-white" src="./img/icon-close-white.svg" alt="Close" title="Close">
							<span>Close</span>
						</button>
        			</header>
					<div class="body">
					<input id="search-input-design-studio" type="text" placeholder="查找门店...">
					<ul id="search-results" class="grid padded columns-3"></ul>
					</div>
				</div>

      <button class="icon menu trigger" rel="menu-overlay">
        <img class="nonie-black" id="ds-top-menu-open-black" src="./img/icon-menu.svg" alt="Menu" title="Menu">
        <img class="ie-white" id="ds-top-menu-open-white" src="./img/icon-menu-white.svg" alt="Menu" title="Menu">
        <span>Menu</span>
      </button>
      <nav class="overlay" id="menu-overlay">
        <header class="header">
          <button class="icon close" rel="menu-overlay">
            <img class="nonie-black" id="ds-top-menu-close-black" src="./img/icon-close.svg" alt="Close" title="Close">
            <img class="ie-white" id="ds-top-menu-close-white" src="./img/icon-close-white.svg" alt="Close"
              title="Close">
            <span>Close</span>
          </button>
        </header>
        <div class="body">
          <a class="stores" href="https://www.starbucks.com.cn/design-studio/stores/" id="ds-top-menu-stores">门店展示</a>
          <a class="stores" href="https://www.starbucks.com.cn/design-studio/inspirations/"
            id="ds-top-menu-inspiration">全部灵感</a>
          <a class="stores" href="https://www.starbucks.com.cn/design-studio/about/" id="ds-top-menu-about">关于我们</a>
          <a href="https://www.starbucks.com.cn/design-studio/en/" id="ds-language" class="language">English</a>
        </div>
      </nav>
    </div>

  </header>

  <section id='content' class='zh'>
    <div class="home">
      <div class='store-container home-mobile-hidden'>
        <div id='home-store-gallery-container'>
          <div class='swiper-wrapper'>

            <div class='swiper-slide image' v-for="(item, index) in top_images" :key="index"
              :style="`background-image: url(${item.image_url})`">
              <div class='store_overlay'>
                <p>{{item.store_name}}</p>
              </div>
              <a class='store-link' href='https://www.starbucks.com.cn/design-studio/stores/BJFUN/'></a>
            </div>
          </div>
        </div>
        <div class='holder' id='left'>
          <div></div>
        </div>
        <div class='holder' id='right'>
          <div></div>
        </div>
      </div>
      <div class='inspiration-container home-mobile-hidden'>
        <div id='inspiration-gallery-container' dir='rtl'>
          <div class='swiper-wrapper'>
            <div class='swiper-slide image' v-for="(item, index) in bottom_images" :key="index"
              :style="`background-image: url(${item.small})`">
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/SZCART/'></a>
            </div>
          </div>
        </div>
      </div>

      <div class='inspiration-container home-mobile-visible'>
        <div id='mobile-inspiration-gallery-container' dir='rtl'>
          <div class='swiper-wrapper'>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/art_500.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/SZCART/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/TJJOYCITY_art500.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/TJJCART/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/SZ_ART2.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/szcf1/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/SZC_1ART2.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/szcf2/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/SZC_2ART2.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/szcf3/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/15-Inspiration/small/14.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/bj-dashila/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/15-Inspiration/small/18.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/bj-kerry/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/15-Inspiration/small/11.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/changsha-yunda/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/15-Inspiration/small/10.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/corporateave-2/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/15-Inspiration/small/4.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/corporateave/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/15-Inspiration/small/8.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/guangzhou-zhongshan-2/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/15-Inspiration/small/2.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/guangzhou-zhongshan/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/15-Inspiration/small/7.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/hangzhou-brokenbridge-2/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/15-Inspiration/small/1.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/hangzhou-brokenbridge/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/15-Inspiration/small/16.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/shanghai-disney-2/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/15-Inspiration/small/3.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/shanghai-disney/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/15-Inspiration/small/15.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/shanghai-hengshan-2/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/15-Inspiration/small/13.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/shanghai-hengshan/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/15-Inspiration/small/17.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/sinan/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/15-Inspiration/small/20.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/wuhan-tiandi-2/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/15-Inspiration/small/9.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/wuhan-tiandi/'></a>
            </div>

            <div class='swiper-slide image'
              style='background-image: url(https://www.starbucks.com.cn/design-studio/images/15-Inspiration/small/19.jpg)'>
              <a href='https://www.starbucks.com.cn/design-studio/inspirations/xian-zhongda/'></a>
            </div>

          </div>
        </div>
      </div>
    </div>

  </section>

  <footer id="footer">
    <div class="legal">
      <span class="copyright">© 2018 Starbucks Corporation.</span>
      <a class="icp" href="http://www.miitbeian.gov.cn/">沪ICP备17003747号</a>
    </div>

  </footer>
	</div>
</template>

<script>
// import './styles.css'
import NavContainer from '@/components/navContainer'
import NavOverlay from '@/components/NavOverlay'
import NavMobile from '@/components/navMobile'
import request from '@/utils/request'
import { initHomePageAnimation } from './homepage'

export default {
	name: 'stores',
	metaInfo: {
		title: '门店查询',
		titleTemplate: '%s | XPEL',
		meta: [
			{
				name: 'keywords',
				content: ''
			},
			{
				name: 'description',
				content: '查询附近的门店位置、营业时间及联系方式。'
			}
		]
	},
	data(){
		return {
			bottom_images: [],
			top_images: [],
			lgMedia: window.matchMedia('(min-width: 1025px)').matches,
			mbMedia: window.matchMedia('(max-width: 640px)').matches,
			map: null,
			localPosition: '',
			storesList: [],
			nearbyStores: [],
			cityInfo: [],
			markers: [],
			storage: null,
			loadingStores: false,
		}
	},
	mounted(){
		window.matchMedia('(min-width: 1025px)').addListener(()=>{
			this.lgMedia = window.matchMedia('(min-width: 1025px)').matches;
		});
		window.matchMedia('(max-width: 640px)').addListener(()=>{
			this.mbMedia = window.matchMedia('(max-width: 640px)').matches;
		});
	},
	created() {
		request({
			url: 'api/store/images',
		}).then(res =>{
			if (res.code == 0) {
				this.top_images = res.data.top_images;
				this.bottom_images = res.data.bottom_images;
				this.$nextTick(initHomePageAnimation);
			}
		})
	},
	components: {
		NavContainer: NavContainer,
		NavOverlay: NavOverlay,
		NavMobile: NavMobile
	},
	methods: {
		
	}
}

</script>

<style scoped>
@import url('./styles.css');
</style>
